<script setup>
import { reactive } from "vue";

import Data from "@/user.json"
const user = reactive(Data)
</script>

<template>
  <body class="w-[100vw] h-[100vh] select-none">
    <header class="h-[5rem] w-full flex justify-between items-center">
        <h1 class="text-[#c77430] border-l-8 border-[#ffbf40] pl-[.5rem] ml-[1rem]">我的</h1>
    </header>
    <main class="w-full h-auto flex flex-col items-center">
        <control class="w-5/6 h-[8rem] bg-[#f0f0f0] rounded-xl flex justify-start items-center mb-[.5rem]">
            <avatar class="w-[6rem] h-[6rem] rounded-full bg-[#c0c0c0] mx-[1rem] flex justify-center items-center "><i class="iconfont text-[#a0a0a0] ">&#xe688;</i></avatar>
            <content class="flex flex-col">
                <title class="flex text-[#b0b0b0] font-bold text-[1.5rem] my-[.5rem]">用户名称</title>
                <num class="flex text-[#b0b0b0] text-[.9rem] font-bold">
                    已接入 {{ 6 }} 个设备
                </num>
            </content>
        </control>
        <setting class="w-5/6 h-auto flex flex-col justify-start items-center" v-for="(item, index) in user" :key="index">
            <item class="w-full h-[3rem] bg-[#f0f0f0] rounded-xl my-[.2rem] flex justify-between items-center">
                <info class="h-full flex justify-between items-center mx-[1rem] text-[#a0a0a0]">
                    <icon><i class="iconfont">{{ item.icon }}</i></icon>
                    <text class="font-bold text-[1.2rem] mx-[.5rem]">{{ item.title }}</text>
                </info>
                <icon class="mx-[1rem]"><i class="iconfont text-[#b0b0b0]" style="font-size: 36px;">&#xe600;</i></icon>
            </item>
        </setting>
    </main>
  </body>
</template>

<style>
@font-face {
  font-family: 'iconfont';  /* Project id 4312277 */
  src: url('//at.alicdn.com/t/c/font_4312277_og1o8t0fsb.woff2?t=1699362132976') format('woff2'),
       url('//at.alicdn.com/t/c/font_4312277_og1o8t0fsb.woff?t=1699362132976') format('woff'),
       url('//at.alicdn.com/t/c/font_4312277_og1o8t0fsb.ttf?t=1699362132976') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
</style>